<template>
    <div 
        class="info-poptip"
        v-show="isShow" 
        :style="{ left: `${left}px`, top:`${top}px` }" 
        @mouseenter="enter" 
        @mouseleave="leave" 
        @click.stop>
        <Card class="my-card">
            <p slot="title" class="title">
                <Icon type="ios-construct"></Icon>
                <Tooltip :content="title" placement="top" transfer :max-width="500">
                    {{ title }}
                </Tooltip>
                <span slot="title" style="position:absolute;right:0px" v-if="creatorName">
                    <Icon type="ios-contact"></Icon>
                    {{ creatorName }}
                </span>
            </p>
            <ul>
                <li v-for="(item, index) in columns" :key="index">
                    <span class="_dot"></span>{{ item.label }}：{{ item.value }}
                </li>
            </ul>
        </Card>
    </div>
</template>

<script>
export default {
    name: 'InfoPoptip',
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        left: {
            type: Number,
            default: 0
        },
        top: {
            type: Number,
            default: 0
        },
        columns: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        creatorName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
        }
    },
    methods: {
        enter(){
            this.$emit('on-enter')
        },
        leave(){
            this.$emit('on-leave')
        },
    }
}
</script>

<style scoped>
.info-poptip {
    position: absolute;
    z-index: 999999;
    max-width: 500px;
}

.my-card {
    min-width: 350px;
    max-width: 600px;
}

.my-card li {
    word-break: break-all;
}

.title {
    position: relative;
    display: flex;
    align-items: center;
}

.title /deep/ .ivu-tooltip {
    margin: 0 6px;
    flex: 1;
    overflow: hidden;
}

.title /deep/ .ivu-tooltip .ivu-tooltip-rel {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    margin-top: 6px;
}

._dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f90;
    margin-right: 5px
}
</style>